<template>
  <div id="student-guide">
    <div class="guide-title">
      <h1>新用户指南</h1>
      <hr />
      <h4>看起来您是第一次使用该系统，先填写个人信息吧！</h4>
    </div>
    <!-- Form -->
    <el-form class="form" :model="form" ref="form" label-position="top">
      <el-form-item label="学生姓名" prop="name" :rules="rules.name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex" :rules="rules.sex">
        <el-radio-group v-model="form.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="院系/专业" prop="facultyWithMajor" :rules="rules.facultyWithMajor">
        <major-selector v-model="form.facultyWithMajor"></major-selector>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone" :rules="rules.phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <!-- <el-form-item label="选择想要入住的宿舍" prop="roomId" :required="true">
        <room-selector v-model="form.roomId"></room-selector>
      </el-form-item> -->
    </el-form>
    <!-- Form -->
    <div class="btn-wrapper">
      <el-button type="primary" @click="handleSubmitClick">提交信息</el-button>
    </div>
  </div>
</template>

<script>
import RoomSelector from '@/components/RoomSelector/index'
import MajorSelector from '@/components/MajorSelector'
import { updateUserInfo, getInfo } from '@/api/user'

export default {
  name: 'student-guide',
  components: {
    RoomSelector,
    MajorSelector
  },
  data() {
    return {
      form: {
        name: '',
        sex: 0,
        phone: '',
        roomId: null,
        facultyWithMajor: []
      },
      buildingId: null,
      floorId: null,
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            //pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码'
          }
        ],
        id_number: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号码'
          }
        ],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        facultyWithMajor: [{ required: true, message: '请选择专业', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmitClick() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$confirm(
            `${this.form.name}同学，请确认您填写的信息正确无误`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
            .then(() => {
              this.submitFormData().then(() => {
                this.$message({
                  type: 'success',
                  message: '更新成功'
                })
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitFormData() {
      return new Promise((resolve, reject) => {
        updateUserInfo({
          name: this.form.name,
          sex: this.form.sex,
          phone: this.form.phone,
          roomId: this.form.roomId,
          facultyId: this.form.facultyWithMajor[0],
          majorId: this.form.facultyWithMajor[1],
          checkTime: new Date().valueOf()
        })
          .then(() => {
            this.$store.dispatch('user/getInfo')
            resolve()
          })
          .catch(e => {
            reject(e)
          })
      })
    }
  },
  mounted() {
    getInfo().then(res => {
      this.form = res.data
      this.form.facultyWithMajor = [];
      this.form.facultyWithMajor.push(res.data.facultyId)
      this.form.facultyWithMajor.push(res.data.majorId)
    });
  }
}
</script>

<style lang="scss" scoped>
#student-guide {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 40px;

  ::v-deep .form {
    .el-cascader {
      width: 100%;
    }
  }

  .btn-wrapper {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 20px;
  }
}
</style>
